<template>
  <div style="height:100%">
    <div id="dataOptionChart" :style="{height:height+'px'}" style="width:100%" />
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts-liquidfill/src/liquidFill.js' // 在这里引入    position: relative position: absolute; top: 0; <div class="dogChart bg_color" id="dogChart" style="height:100%"></div>
export default {
  props: {
    height: { type: Number, default: 200 }
  },
  data() {
    return {
      dataOptionChart: null
    }
  },
  computed: {},
  watch: {
  },
  mounted() {
    this.getOperatesCount()
  },
  methods: {
    getOperatesCount() {
      this.$store.dispatch('getOperatesCount').then(response => {
        var m2R2Data = response
        this.initChart(m2R2Data)
      })
    },
    initChart(m2R2Data) {
      this.dataOptionChart = echarts.init(document.getElementById('dataOptionChart'))
      const option = {
        backgroundColor: '#ffffff',
        grid: {
          right: '2%',
          bottom: '10%',
          left: '2%',
          top: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: function(parms) {
            var str = parms.seriesName + '</br>' +
                parms.marker + '' + parms.data.name + '</br>' +
                '数量：' + parms.data.value + '</br>' +
                '占比：' + parms.percent + '%'
            return str
          }
        },
        legend: {
          orient: 'vertical',
          left: '70%',
          align: 'left',
          top: 'middle',
          textStyle: {
            color: '#8C8C8C'
          },
          height: 250
        },
        series: [
          {
            name: '操作类型',
            type: 'pie',
            center: ['35%', '50%'],
            radius: ['40%', '65%'],
            clockwise: false, // 饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'outter',
                formatter: function(parms) {
                  return parms.percent + '%'
                }
              }
            },
            labelLine: {
              show: false,
              normal: {
                length: 5,
                length2: 3,
                smooth: false
              }
            },
            data: m2R2Data
          }
        ]
      }

      this.dataOptionChart.resize()
      this.dataOptionChart.setOption(option, true)
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.bg_color {
  background-color: #090d4d;
}
</style>
